<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
<script src="../AngularJS/angular-1.5.0/angular.min.js"></script>
		<title></title>
	</head>
	<body ng-app="myapp">
		<style type="text/css">
			div[contenteditable]{
				cursor: pointer;
				background-color: #D0D0D0;
			}
		</style>
		
		<div ng-controller="myctrl">
			<div contenteditable="true" ng-model="content" title="click to edit">
				Some
			</div>
			<pre>model = {{content}}</pre>
		</div>
<script>
	var app = angular.module("myapp",[]);
	app.controller("myctrl",function($scope){
		
	});
	app.directive("contenteditable",function(){
		return{
			require:'ngModel',
			link:function(scope,elm,attrs,ctrl){
				//view -> model
				elm.bind('keyup',function(){
					scope.$apply(function(){
						ctrl.$setViewValue(elm.Text());
					});
				});
				//model > view
				ctrl.$render=function(){
					elm.html(ctrl.$viewValue);
				};
				//load init value from DOM
				ctrl.$setViewValue(elm.html());
			}
		}
	});
	 
</script>
	</body>
</html>
